﻿@extends('common.header')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="csrf-token" content="{{ csrf_token() }}">
	<meta name="Keywords" content="{{ $article->keywords }}" />
	<meta name="Description" content="{{ $article->desc }}"/>
	<title>{{ $article->title }}{{ $webConfig->webName }}</title>
	<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}" />
	<link rel="stylesheet" type="text/css" href="{{ asset('/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/newDetail/detail_info.css') }}"/>
    <script src=" {{ asset('/js/jquery-1.9.1.min.js') }} "></script>
    <script type="text/javascript">

        <!-- 2.设置全局ajax选项 -->
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // 获取 token
        var _token = $('meta[name="csrf-token"]').attr('content');

        // 评论 回复 功能
		// 参数 原始评论id 被回复人id
        function reply( type,comment_id,user_id,id) {
            // 回复内容
            switch(type)
            {
                case 'reply':
                    var content = $("#reply_content_"+id).val();
                    break;
                case 'huifu':
                    var content = $("#huifu_content_"+id).val();
                    break;
            }

            $.ajax({
                type: "post",
                url: "{{ url('/commentReply') }}",
                data: {comment_id: comment_id, user_id: user_id, content: content, _token: _token},
                async: false,
                dataType: "json",
                success: function (back) {
                    if (back['show_info'] == '回复成功') {

                        $('.err-tip').html('');
                        $('.err-tip').html(back['show_info']);
                        $(".err-tip").slideDown(1500);
                        $(".err-tip").delay(1500).slideUp(1000);
                        $("textarea[name='comment-content']").val('');
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    } else {
                        $('.err-tip').html('');
                        $('.err-tip').html(back['show_info']);
                        $(".err-tip").slideDown(1500);
                        $(".err-tip").delay(1500).slideUp(1000);
                    }
                }
            });

        }
        var isShow = false;

        // 点击评论的回复 评论id
        function showReply(comment_id)
        {
            // 回复的窗口 全部隐藏
            $("div[id*='reply_']").hide();
            $("div[id*='huifu_']").hide();
            if( !isShow )
            {
                $("#reply_"+comment_id).show();
                isShow = true;
            }else
            {
                $("#reply_"+comment_id).hide();
                isShow = false;
            }
        }

        // 点击回复的 提交按钮
        function huifu(reply_id)
        {
            // 回复的窗口 全部隐藏
            $("div[id*='reply_']").hide();
            $("div[id*='huifu_']").hide();
            if( !isShow )
            {
                $("#huifu_"+reply_id).show();
                isShow = true;
            }else
            {
                $("#huifu_"+reply_id).hide();
                isShow = false;
            }

        }


        // 点赞
        function replyPraise( prefix,id,likeType )
        {
            var obj = $("#"+prefix+"_praise_"+id);
            var isPraise = obj.attr('isPraise');
            if (isPraise == 'false')
            {
                // 未点赞
                // 获取 现有 赞数
                var num = parseInt($("#"+prefix+"_praise_txt_"+id).text());
                // +1
                num += 1;
                $("#"+prefix+"_praise_txt_"+id).text(num);
                // 已赞图片
                $("#"+prefix+"_praise_img_"+id).attr("src", "{{ asset('/images/articles/yizan.png') }}");
                // 写进 数据库
                $.ajax({
                    type: "post",
                    url: "{{ url('/commentLike') }}/"+likeType,
                    data: {id: id, _token: _token},
                    async: false,
                    dataType: "json",
                    success: function (back)
                    {
                        // alert(back['show_info']);
                    }
                });
                // 设置为 已点赞
                obj.attr('isPraise', 'true');

            }else
            {
                // 已点赞
				$("#"+prefix+"_praise_warn_"+id).html('');
				$("#"+prefix+"_praise_warn_"+id).html('您已赞过');
				$("#"+prefix+"_praise_warn_"+id).show();
				setTimeout(function(){
					$("#"+prefix+"_praise_warn_"+id).hide();
				},1000);
            }

        }

    </script>
	
	<!--收藏点赞-->
	<script>
	// 收藏
	function collect( prefix,id,collectType )
	{
		var obj = $("#"+prefix+"_collect_"+id);
		var isCollect = obj.attr('isCollect');
		if (isCollect == 'false')
		{
			// 未收藏
			
			// 写进 数据库
			$.ajax({
				type: "post",
				url: "{{ url('/collect') }}/"+collectType,
				data: {id: id,_token: _token},
				async: false,
				dataType: "json",
				success: function (back)
				{
					
					if( back['show_info']!='' )
					{
						$("#"+prefix+"_warn_"+id).html('');
						$("#"+prefix+"_warn_"+id).html('您已收藏过');
						$("#"+prefix+"_warn_"+id).show();
						setTimeout(function(){
							$("#"+prefix+"_warn_"+id).hide();
						},1000);
						// 已收藏图片
						$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
					}else
					{
						$("#"+prefix+"_warn_"+id).html('');
						$("#"+prefix+"_warn_"+id).html('收藏成功');
						$("#"+prefix+"_warn_"+id).show();
						setTimeout(function(){
							$("#"+prefix+"_warn_"+id).hide();
						},1000);
						// 已收藏图片
						$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
					}
					
				}
			});
			// 设置为 已收藏
			obj.attr('isCollect', 'true');
			
		}else
		{
			// 已收藏
			$("#"+prefix+"_warn_"+id).html('');
			$("#"+prefix+"_warn_"+id).html('您已收藏过');
			$("#"+prefix+"_warn_"+id).show();
			setTimeout(function(){
				$("#"+prefix+"_warn_"+id).hide();
			},1000);
			// 已收藏图片
			$("#"+prefix+"_collect_img_"+id).attr("src", "{{ asset('/images/articles/yicang.png') }}");
		}
	
	}
   </script>
	<style>
		#baidushare a{width:45px;height:45px;padding:0;margin:6px;} 
		#baidushare .bdsharebuttonbox .bds_more{background:url('/images/articles/xiang.png') no-repeat;} 
	</style>
</head>
<body style="background:#fff">

<!--面包屑导航-->
<div style="width: 1200px;height: 40px;line-height:40px;position: relative;margin: 110px auto 0">
    <ol style="float: left;overflow: hidden;color: #333;list-style: none;">
        <li style="float: left;margin-left: 5px">当前位置：</li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/') }}" style="color: #de1e30;margin-left: 5px">首页</a></li>
        <li style="float: left;margin-left: 5px"><a href="{{ url('/footClub') }}" style="color: #de1e30;margin-left: 5px">> 球吧</a></li>
		<li style="float: left;margin-left: 5px">> {{ $article->title }}</li>
    </ol>
</div>

<!--资讯详情板块-->
<div class="info-center-news-bg">
    <!--右侧导航-->
    <div class="right-news-list">
		<div class="hotvideo">
			<div class="hottitle">热门推荐</div>
			<div class="hotlist">	
				<ul>
					@forelse( $recommend as $key=>$recommend_info)
					<li>
						<a href="{{ url('/article') }}/{{ $recommend_info['id'] }}">
							<span class="current"></span>
								<img src="{{ $recommend_info['pic_url'] }}" title="{{ $recommend_info['title'] }}" alt="{{ $recommend_info['title'] }}">
							<p>{{ $recommend_info['title'] }}</p>
						</a>
					</li>
					@empty
					@endforelse
				</ul>
			</div>
		</div>	
    </div>
    <!--左侧新闻列表-->
    <div class="left-news">
        <!--文章部分-->
        <div class="news-area">
		
            <!--文章标题-->
            <h2>{{ $article->title }}</h2>
            <!--文章作者-->
            <div class="time-author">
                <a href="{{ url('/showcenter') }}/{{ $article->uid }}">
					<span>作者：{{ $article->name }}&nbsp;&nbsp;&nbsp;</span>
				</a>
                <span>{{ $article->create_at }}</span>
            </div>
            <!--文章内容-->
            <div class="news-text">
                <div style="height:auto;word-break:break-all;">{!! $article->content !!}</div>
            </div>
            <!-- 右下标签 -->
            <div class="share-box">

                <!--  资讯 内容点赞 -->
                <span style="float:left;display:inline-block;" id="praise_praise_warn_{{ $article->id }}" ></span>
                <div class="praise">
					<span id="praise_praise_{{ $article->id }}" class="info-main-zan" onclick="replyPraise('praise',{{ $article->id }},2);" isPraise="false" style="margin-top:-7px;display: inline-block;">
						<img src="{{ asset('/images/articles/zan.png') }}" id="praise_praise_img_{{ $article->id }}" />
					</span>
                    <span id="praise_praise_txt_{{ $article->id }}" style="margin-top:3px;display:inline-block;">{{ $article->good }}</span>
                </div>

                <!--评论-->
                <div class="praise">
                    <span class="share"><img src="{{ asset('/images/articles/ping.png') }}" id="praise-img"/></span>
                    <span class="share_number">{{ $comments_total }}</span>
                </div>
				
				<!-- 收藏 -->
				<!-- 提示信息 -->
				<span style="" id="article_warn_{{ $article->id }}" ></span>
				<div class="praise" style="margin-top:-1px">
					<a>
						@if( session('user_name') )
							<span id="article_collect_{{ $article->id }}" onclick="collect('article',{{ $article->id }},2);" style="padding-top:-6px;display:inline-block;" isCollect='false' >
								<img src="{{ asset('/images/articles/cang.png') }}"  id="article_collect_img_{{ $article->id }}" style="width:20xp;height:20px"  >
							</span>		
						@else
							<span id="collectLogin"  >
								<img src="{{ asset('/images/articles/cang.png') }}" style="width:20xp;height:20px"  />
							</span>		
						@endif
					</a>
				</div>

				
               <!--分享-->
			   <div class="baidushare" >
					<div class="bdsharebuttonbox" data-tag="share_1">
						<a class="bds_more" data-cmd="more"></a>
					</div>
					<script>
						window._bd_share_config = {
							common : {
								// bdText : '自定义分享内容',
								// bdDesc : '自定义分享摘要',
								// bdUrl : '自定义分享url地址',
								// bdPic : '自定义分享图片'
							},
							share : [{
								"bdSize" : 16
							}],
							slide : [{
								bdImg : 0,
								bdPos : "right",
								bdTop : 100
							}],
						}
						with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];   
						
					</script>
		</div>
   

	


            </div>
        </div>

        <!--评论部分-->
        <div class="comment-area">


            <!--发布评论-->
            <div class="input-area">

				<span class="left-text">
                    <em class="red comment-count">{{ $comments_total }}&nbsp;</em>条评论
                </span>
                <textarea name="comment-content" placeholder="写下您的评论..."></textarea>
                <!--错误提示-->
                <div class="err-tip" style="font-size: 12px">
                </div>
                <!--评论按钮-->
                @if( session('user_name') )
                <!-- 登陆了直接评论 -->
                <div class="user-panel">
                    <a id="comment" class="submit-btn">评论</a>
                </div>
                @else
                <!-- 未登陆先登录 -->
                <div class="user-panel" id="comment_login">
                    <a href="#" class="submit-btn">评论</a>
                </div>
                @endif


            </div>


            <!--历史评论-->
            <div class="comment-container">
                <div class="header">
                    <span>最新评论</span>
                </div>
                <div class="comment-list">
                    <!-- 1.遍历评论 -->
                    @forelse( $comments as $key => $comment_info )
						
                    <div class="comment-item" style="height:auto;overflow:hidden;">
                        <a href="{{ url('/showcenter') }}/{{ $comment_info->user_id }}" style="width:50px;height:50px;float:left;dispaly:inline-block;">
							<img class="commentor-avatar" src="{{ $comment_info->pic_url  }}" alt="">
						</a>
                        <div style="width:750px;height:auto;float:left;">
                            <!--评论-->
                            <div class="detail">
                                <!--评论人-->
                                <span class="name"> <a href="{{ url('/showcenter') }}/{{ $comment_info->user_id }}">{{ $comment_info->name  }}</a></span>
                                <!--评论内容-->
                                <span class="content">{{ $comment_info->content  }}</span>
                                <div>
                                    <!--评论时间-->
                                    <span class="comment-time">{{ $comment_info->create_at  }}</span>


                                    <!--回复按钮-->
                                    <div class="btns">
                                        <!-- 回复按钮 -->
                                        @if( session('user_name') )
                                        <!-- 登陆了出现回复窗口 -->
                                        <a onclick="showReply({{ $comment_info->id  }})">回复</a>
                                        @else
                                        <!-- 未登陆先登录 -->
                                        <a class="replylogin">回复</a>
                                        @endif
                                    </div>

                                    <!-- 评论点赞 -->

                                    <div class="reply-praise">
											<span id="reply_praise_{{ $comment_info->id  }}" onclick="replyPraise( 'reply', {{ $comment_info->id  }},3 )" isPraise="false">
												<img src="{{ asset('/images/articles/zan.png') }}" id="reply_praise_img_{{ $comment_info->id  }}" />
											</span>
                                        <span id="reply_praise_txt_{{ $comment_info->id  }}">{{ $comment_info->good }}</span>
                                    </div>
                                    <span id="reply_praise_warn_{{ $comment_info->id  }}"></span>

                                </div>

                            </div>


                            <!-- 2.遍历评论下的回复 -->
                            @forelse( $comments_reply[$key] as $key => $reply_info )
                            <!-- 回复评论留言 -->
                            <div class="reply_area" style="display:block">
							
                                <a href="{{ url('/showcenter') }}/{{ $reply_info['reply_user_id'] }}" class="reply_area_img">
									<img src="{{ $reply_info['uupic_url'] }}" alt="">
								</a>

                                <!-- 回复者姓名 -->
                                <span> 
									<a href="{{ url('/showcenter') }}/{{ $reply_info['reply_user_id'] }}"><span class="reply_name">{{ $reply_info['replyname'] }}</span></a>@
									<a href="{{ url('/showcenter') }}/{{ $reply_info['user_id'] }}"><span class="reply_name">{{ $reply_info['username'] }}</span></a>
								</span>

                                <p class="reply_content reply_content1" style="width:auto;font-size:13px">
                                    <!-- 回复内容 -->
                                    {{ $reply_info['content'] }}</p>
                                <div>
                                    <!-- 回复时间 -->
                                    <span class="comment-time"
                                          style="color:#777">{{ $reply_info['create_at']  }}</span>


                                    <!-- 回复按钮 -->
                                    @if( session('user_name') )
                                    <!-- 登陆了出现回复窗口 -->
                                    <div class="btns">
                                        <a style="color:#777" onclick="huifu({{ $reply_info['id'] }});" >回复</a>
                                    </div>
                                    @else
                                    <!-- 未登陆先登录 -->
                                    <div class="btns">
                                        <a style="color:#777" class="replylogin" >回复</a>
                                    </div>
                                    @endif

                                    <!-- 回复点赞 -->
                                    <div class="reply-praise">
											<span id="huifu_praise_{{ $reply_info['id']  }}" onclick="replyPraise('huifu',{{ $reply_info['id'] }},4);" isPraise="false">
												<img src="{{ asset('/images/articles/zan.png') }}" id="huifu_praise_img_{{ $reply_info['id'] }}"/>
											</span>
                                        <span id="huifu_praise_txt_{{ $reply_info['id'] }}">{{ $reply_info['good'] }}</span>
                                    </div>
                                    <span id="huifu_praise_warn_{{ $reply_info['id']  }}" ></span>




                                </div>

                            </div>

                            <!-- 遍历评论下的回复 的回复窗口 -->
                            <div class="input-area" id="huifu_{{ $reply_info['id'] }}" style="height:120px;margin-top:5px;display:none">

									<textarea name="comment-content" style="width:700px;"
                                              id="huifu_content_{{ $reply_info['id'] }}"></textarea>

                                <!--错误提示-->
                                <div class="err-tip" style="font-size: 12px"></div>

                                <!--提交按钮 -->
                                <div class="user-panel reply-user-panel" style="margin: 10px 50px 0 0">
                                    <!-- 提交按钮 -->
                                    <a class="submit-btn" id="huifuBtn_{{ $reply_info['id']  }}"
                                       onclick="reply( 'huifu',{{ $comment_info->id }} ,{{ $reply_info['reply_user_id'] }},{{ $reply_info['id'] }} );">提交</a>
                                </div>

                            </div>


                            @empty
                            @endforelse

                            <!-- 回复窗口-->
                            <div class="input-area" id="reply_{{ $comment_info->id }}" style="height:120px;margin-top:5px;display:none">

									<textarea name="comment-content" style="width:700px;"
                                              id="reply_content_{{ $comment_info->id  }}"></textarea>

                                <!--错误提示-->
                                <div class="err-tip" style="font-size: 12px"></div>

                                <!--提交按钮 -->
                                <div class="user-panel reply-user-panel" style="margin: 10px 50px 0 0">
                                    <!-- 提交按钮 -->
                                    <a class="submit-btn" id="replyBtn_{{ $comment_info->id  }}"
                                       onclick="reply( 'reply',{{ $comment_info->id }} ,{{ $comment_info->user_id }},{{ $comment_info->id  }} );">提交</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    @empty
                    @endforelse

                </div>
				<div style="text-align:center;font-size:16px;" >
					{{ $comments->links() }} 
				</div>
                <!-- 加载更多
                <div id="loadMore" class="load-more">
                    <a href="javascript:;" onClick="lanren.loadMore();">加载更多</a>
                </div>-->
            </div>



        </div>
    </div>

</div>
@extends('common.footer')

<div id="article_id" article_id="{{ $article->id }}"></div>
<!--引用js文件-->
<script type="text/javascript" src="{{ asset('/js/tab.js') }}"></script>
<script src="{{ asset('/js/jquery.mousewheel.min.js') }}"></script>
<script src="{{ asset('/js/jquery.mcustomscrollbar.min.js') }}"></script>

<script type="text/javascript">

    $(function () {
        // 创建 评论
        $("#comment").click(function () {
            // 获取 评论 内容
            var content = $("textarea[name='comment-content']").val();
            if (!content) {
                alert('请输入您要评论的内容');
				return false;
            }
            var article_id = $("#article_id").attr('article_id');
            $.ajax({
                type: "post",
                url: "{{ url('/comment') }}/2",
                data: {record_id: article_id, content: content, _token: _token},
                async: false,
                dataType: "json",
                success: function (back) {
                    if (back['show_info'] == '评论成功') {

                        $('.err-tip').html('');
                        $('.err-tip').html(back['show_info']);
                        $(".err-tip").slideDown(1500);
                        $(".err-tip").delay(1500).slideUp(1000);
                        $("textarea[name='comment-content']").val('');
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    } else {
                        $('.err-tip').html('');
                        $('.err-tip').html(back['show_info']);
                        $(".err-tip").slideDown(1500);
                        $(".err-tip").delay(1500).slideUp(1000);
                    }
                }
            });
        });

    })

</script>

</body>
</html>